<template>
    <div class="login-page">
        <div class="login-container">
            <div class="login-box">
                <h2>{{ t('LoginPage.Title') }}</h2>
                <div class="login-options">
                    <button class="login-btn google" @click="googleLogin">
                        <img src="@/assets/google.png" alt="Google" />
                        {{ t('LoginPage.GoogleLogin') }}
                    </button>
                    <!-- <button class="login-btn apple">
                        <img src="@/assets/apple.png" alt="Apple" />
                        {{ t('LoginPage.AppleLogin') }}
                    </button> -->
                    <div class="divider">{{ t('LoginPage.Or') }}</div>
                    <form @submit.prevent="handleEmailLogin">
                        <input type="email" v-model="email" :placeholder="t('LoginPage.EmailPlaceholder')" required />
                        <input type="password" v-model="password" placeholder="密码" required />
                        <div class="remember-me">
                            <input type="checkbox" id="remember" v-model="remember" />
                            <label for="remember">{{ t('LoginPage.RememberMe') }}</label>
                        </div>
                        <button type="submit" class="login-btn submit">{{ t('LoginPage.LoginButton') }}</button>
                    </form>
                    <div class="links">
                        <span>{{ t('LoginPage.NoAccount') }}</span>
                        <router-link to="/register">{{ t('LoginPage.RegisterNow') }}</router-link>
                    </div>
                </div>
            </div>
            <div class="welcome-section">
                <h1>{{ t('LoginPage.Welcome') }}</h1>
                <ul class="features">
                    <li>{{ t('LoginPage.Feature1') }}</li>
                    <li>{{ t('LoginPage.Feature2') }}</li>
                    <li>{{ t('LoginPage.Feature3') }}</li>
                    <li>{{ t('LoginPage.Feature4') }}</li>
                </ul>
                <div class="preview-images flex">
                    <img src="@/assets/1.png" alt="" />
                    <img src="@/assets/2.png" alt="" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import encrypt from '@/utils/encrypt.js'
import { v4 as uuidv4 } from 'uuid'
import { useRouter } from 'vue-router'
const router = useRouter()
const { t } = useI18n()
const email = ref('2312516245@qq.com')
const password = ref('147258369gzl')
const remember = ref(false)
import { loginApi, getUserInfoApi } from '@/api/login'
const handleEmailLogin = async () => {
    try {
        const res = await loginApi({
            email: email.value,
            password: password.value
        })
        console.log(res,'kaka');
        if (res.code == 200) {
            encrypt.SetLocalData('accessToken', res.data.accessToken)
            encrypt.SetLocalData('refreshToken', res.data.refreshToken)
            
            getUserInfoApi({}).then(res => {
                if(res.code == 200){
                    encrypt.SetLocalData('userInfo', res.data)
                    ElMessage.success('登录成功')
                    router.push('/')
                }
            })
          
        }else if(res.code == '10031'){
            ElMessage.error('密码错误')
        }else if(res.code == '10032'){
            ElMessage.error('用户不存在')
        } else {
            ElMessage.error(res.msg)
        }
    } catch (error) {
        ElMessage.error(error.response.data.data)
    }
}

const googleLogin = () => {
    // Google OAuth2授权地址
    const googleAuthUrl = 'https://accounts.google.com/o/oauth2/v2/auth'
    const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID
    const redirectUri = import.meta.env.VITE_GOOGLE_REDIRECT_URI

    // 添加更多必要的scope
    const scope = ['https://www.googleapis.com/auth/userinfo.email', 'https://www.googleapis.com/auth/userinfo.profile'].join(' ')

    // 生成随机state防止CSRF攻击
    const state = uuidv4()
    // 保存state到localStorage，用于回调验证
    localStorage.setItem('googleOAuthState', state)

    // 构建授权URL
    const authUrl = new URL(googleAuthUrl)
    authUrl.searchParams.append('client_id', clientId)
    authUrl.searchParams.append('redirect_uri', redirectUri)
    authUrl.searchParams.append('response_type', 'code')
    authUrl.searchParams.append('scope', scope)
    authUrl.searchParams.append('access_type', 'offline')
    authUrl.searchParams.append('state', state)

    // 重定向到Google登录页面
    window.location.href = authUrl.toString()
}
</script>

<style lang="scss" scoped>
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #333;
    padding: 40px 20px;
}

.login-container {
    display: flex;
    width: 90%;
    max-width: 1400px;
    min-height: 600px;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.login-box {
    flex: 0.9;
    padding: 60px;

    h2 {
        margin-bottom: 40px;
        font-size: 32px;
        text-align: center;
        font-weight: 600;
    }
}

.login-options {
    max-width: 460px;
    margin: 0 auto;
}

.login-btn {
    width: 100%;
    padding: 16px;
    margin: 12px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 16px;

    img {
        width: 24px;
        height: 24px;
        margin-right: 12px;
    }

    &:hover {
        background-color: #f8f9fa;
        transform: translateY(-1px);
    }

    &.submit {
        background: #1a73e8;
        color: white;
        border: none;
        font-weight: 500;

        &:hover {
            background: #1557b0;
        }
    }
}

.welcome-section {
    flex: 1.1;
    padding: 60px;
    background: #1a73e8;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;

    h1 {
        margin-bottom: 40px;
        font-size: 36px;
        font-weight: 600;
        line-height: 1.3;
    }

    .features {
        list-style: none;
        padding: 0;

        li {
            margin: 20px 0;
            display: flex;
            align-items: center;
            font-size: 18px;
            line-height: 1.5;

            &:before {
                content: '✓';
                margin-right: 15px;
                font-size: 20px;
            }
        }
    }

    .preview-images {
        margin-top: 50px;
        img {
            width: 285px;
            height: 159px;
        }
    }
}

.divider {
    text-align: center;
    margin: 24px 0;
    color: #666;
    position: relative;

    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 45%;
        height: 1px;
        background-color: #ddd;
    }

    &::before {
        left: 0;
    }

    &::after {
        right: 0;
    }
}

input[type='email'],
input[type='password'] {
    width: 100%;
    padding: 16px;
    margin: 12px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;

    &:focus {
        outline: none;
        border-color: #1a73e8;
    }
}

.remember-me {
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;

    input[type='checkbox'] {
        width: 18px;
        height: 18px;
    }
}

.links {
    text-align: center;
    margin-top: 24px;
    font-size: 15px;

    a {
        color: #1a73e8;
        text-decoration: none;
        margin-left: 5px;
        font-weight: 500;

        &:hover {
            text-decoration: underline;
        }
    }
}

@media (max-width: 1024px) {
    .login-container {
        flex-direction: column;
        width: 95%;
    }

    .login-box,
    .welcome-section {
        flex: none;
        padding: 40px;
    }
}

@media (max-width: 480px) {
    .login-box,
    .welcome-section {
        padding: 30px 20px;
    }
}
</style>
